<template>
  <div class="dn-container">
    <div class="main_body">
      <div class="main_left">
        <div class="btn_group">
          <div @click="addfroms(data)" class="btn_item" v-for="(data, i) in btnlist" :key="i">
            <i :class="data.icon"></i>
            <span>{{ data.name }}</span>
          </div>
        </div>
      </div>
      <div class="phone-area" ref="copyDom">
        <div class="scroll-body">
          <div class="page-content">
            <div class="row relative w840">
              <div class="diy-phone">
                <div class="phone-body">
                  <div class="phone-title goods">
                    <div class="phone-top">
                      <div class="custom-navbar" style="width: 375px; height: 64px; background: rgb(255, 255, 255);">
                        <img
                          src=""
                          alt=""
                          style="width: 375px; height: 20px; position: absolute; top: 0px; left: 0px; z-index: 100;"
                        />
                        <img
                          src=""
                          alt=""
                        />
                      </div>
                    </div>
                    <p class="page-title" style="color: rgb(33, 33, 33);">表单预览</p>
                  </div>
                  <div class="phone-main">
                    <draggable element="div" v-bind="dragOptions" v-model="list">
                      <div @click="handleChange(i)" v-for="(item, i) in list" :key="i" class="drag-item" v-bind:class="{'active-item': item.active && !hideline}">
                        <customfrom :data="item"></customfrom>
                        <!-- <component :data="item.data" v-bind:is="item.components_item"></component> -->
                        <el-popover placement="top" width="160" v-model="item.visible">
                          <p>确定删除吗？</p>
                          <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                            <el-button type="primary" size="mini" @click.stop="delhandle(i)">确定</el-button>
                          </div>
                          <span slot="reference" class="del">删除</span>
                        </el-popover>
                        <i class="left-border border"></i>
                        <i class="right-border border"></i>
                      </div>
                    </draggable>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="component-setter">
        <div class="setter-body">
          <el-form label-width="100px" :model="obj" :rules="rules" ref="ruleForm">
            <div class="header">基本信息</div>
            <el-form-item label="表单名称:" prop="title"><el-input style="width: 300px;" v-model="obj.title" size="medium" placeholder="请输入表单名称"></el-input></el-form-item>
            <el-form-item label="提交权限">
              <el-radio-group v-model="obj.tries_limit">
                <el-radio :label="0">不限制</el-radio>
                <el-radio :label="1">同一账号限提交1次</el-radio>
              </el-radio-group>
            </el-form-item>
            <template v-if="data && data.params">
              <div class="header">表单设置</div>
              <div class="title">{{ data.name }}</div>
              <el-form-item label="标题:"><el-input size="medium" style="width: 300px;" v-model="data.params.title"></el-input></el-form-item>
              <el-form-item label="必填:"><el-switch size="medium" v-model="data.params.required"></el-switch></el-form-item>
              <el-form-item label="说明:"><el-input size="medium" style="width: 300px;" v-model="data.params.explain"></el-input></el-form-item>
              <el-form-item label="提示语" v-if="data.params.tip"><el-input size="medium" style="width: 300px;" v-model="data.params.tip"></el-input></el-form-item>
              <el-form-item label="图片数量" v-if="data.params.maxNumber" ><el-input-number v-model="data.params.maxNumber" size="medium" :min="1" :controls='false'></el-input-number></el-form-item>
              <el-form-item v-if="data.list" :label="'选项' + (i + 1)" v-for="(item, i) in data.list" :key='i'>
                <el-input style="width: 300px;" size="medium" v-model="item.label"></el-input>
                <el-button style="margin-left: 10px;" @click="delitem(i)" type="text" v-if="data.list.length>1">删除</el-button>
              </el-form-item>
              <el-form-item v-if="data.list"><el-button type="primary" @click="additem">添加选项</el-button></el-form-item>
            </template>
          </el-form>
        </div>

        <div class="foot_btns"><el-button type="primary" @click="save">保存数据</el-button></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable';
import html2canvas from 'html2canvas';
import {objextend} from '@/utils/index'
import customfrom from '@/components/customfrom/index';
import {pagebase64Up} from '@/api/mall/dndlist';
import {formcreate,getform,editform} from '@/api/mall/customform';
import {showLoading, hideLoading} from '@/utils/loading';
export default {
  name: 'demo',
  components: {
    draggable,
    customfrom
  },
  data() {
    return {
      linkdata: {},
      tab_num: 0,
      iconshow: false,
      activeNames: [0, 1, 2],
      list: [],
      dragOptions: {
        filter: '.disabled'
      },
      hideline: false,
      obj: {
        title: '',
        tries_limit: 0,
        status:1
      },

      btnlist: [
        {
          name: '图片',
          icon: 'el-sc-tupian5',
          type: 'img',
          params: {
            title: '图片',
            explain: '',
            maxNumber: 10,
            value: [],
            required: true
          }
        },
        {
          name: '单行文本',
          icon: 'el-sc-danhangwenben1',
          type: 'text',
          params: {
            title: '单行文本',
            required: true,
            value: '',
            tip: '请输入',
            explain: ''
          }
        },
        {
          name: '多行文本',
          icon: 'el-sc-artical',
          type: 'textarea',
          params: {
            title: '多行文本',
            required: true,
            value: '',
            tip: '请输入',
            explain: ''
          }
        },
        {
          name: '下拉选项',
          icon: 'el-sc-xiala',
          type: 'select',
          params: {
            title: '下拉选项',
            required: true,
            value: '',
            tip: '请选择',
            explain: ''
          },
          list: [
            {
              value: '1',
              label: '选项1'
            },
            {
              value: '2',
              label: '选项2'
            }
          ]
        },
        {
          name: '单选框',
          icon: 'el-sc-danxuanxuanzhong1',
          type: 'radio',
          params: {
            title: '单选框',
            required: true,
            value: '1',
            explain: ''
          },
          list: [
            {
              value: '1',
              label: '选项1'
            },
            {
              value: '2',
              label: '选项2'
            }
          ]
        },
        {
          name: '多选框',
          icon: 'el-sc-newxuanzhongduoxuan',
          type: 'checkbox',
          params: {
            title: '多选',
            value: '',
            explain: '',
            required: true,
            tip: '请选择',
          },
          list: [
            {
              value: false,
              label: '选项1'
            },
            {
              value: false,
              label: '选项2'
            }
          ]
        },
        {
          name: '地区',
          icon: 'el-sc-diquxuanze',
          type: 'address',
          params: {
            title: '地区',
            status: 2,
            province: '',
            city: '',
            area: '',
            explain: '',
            tip: '请选择地区',
            required: true
          }
        },
        {
          name: '日期',
          icon: 'el-sc-riqi2',
          type: 'datepicker',
          value: '',
          params: {
            title: '日期',
            tip: '选择日期',
            status: 0,
            value: '',
            explain: '',
            required: true
          }
        },
        {
          name: '日期范围',
          icon: 'el-sc-riqi3',
          type: 'date',
          params: {
            title: '日期范围',
            explain: '',
            start: {
              tip: '请选择开始日期',
              status: 0,
              value: ''
            },
            end: {
              tip: '请选择结束日期',
              status: 0,
              value: ''
            },
            required: true
          }
        },
        {
          name: '身份证号码',
          icon: 'el-sc-Id',
          type: 'card',
          params: {
            title: '身份证号码',
            tip: '请填写18位身份证号码',
            value: '',
            explain: '',
            required: true
          }
        },
        {
          name: '时间',
          icon: 'el-sc-shijian',
          type: 'time',
          params: {
            title: '时间',
            tip: '请选择时间',
            status: 0,
            value: '',
            explain: '',
            required: true
          }
        },
        {
          name: '时间范围',
          icon: 'el-sc-shijian6',
          type: 'times',
          params: {
            title: '时间范围',
            explain: '',
            start: {tip: '请选择开始时间', status: 0, value: ''},
            end: {tip: '请选择结束时间', status: 0, value: ''},
            required: true
          }
        },
        {
          name: '手机号码',
          icon: 'el-sc-shouji2',
          type: 'mobile',
          params: {
            title: '手机号码',
            tip: '请填写11位手机号码',
            value: '',
            explain: '',
            required: true
          }
        }
      ],
      data: {},
      drawer: false,
      linkdata: {},
      rules: {
        title: [{required: true, message: '请输入表单名称', trigger: 'blur'}]
      }
    };
  },

  mounted() {
    if (this.$route.query && this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getdetail();
    }
  },

  methods: {
    delhandle(i) {
     this.list.splice(i,1)
     this.handleChange(0)
    },
    handleChange(i) {
      if(this.list.length==0){
        this.data={}
        return false
      }
      this.list.forEach(a => {
        a.active = false;
      });
      this.list[i].active = true;
      this.data = this.list[i];
    },
    delitem(i) {
      this.data.list.splice(i, 1);
    },
    additem() {
      let l = this.data.list.length + 1;
      this.data.list.push({
        label: '选项' + l
      });
    },
    addfroms(data) {
      this.list.forEach(a => {
        a.active = false;
      });

      var data = JSON.parse(JSON.stringify(data));
      data.active = true;
      this.list.push(data);
      this.data = data;
    },
    goback() {
      this.$router.go(-1);
    },
    getdetail() {

      getform(this.id).then(res => {
        // this.data = res.msg.data;
        this.list=res.msg.config

        this.obj = objextend(this.obj, res.msg);
        // this.update_time = res.msg.update_time;
      });
    },
    selectlink(data, i) {
      this.drawer = true;
      this.tab_num = i;
      this.linkdata = data;
    },
    changelink(data) {
      this.drawer = false;
      this.data.tablist[this.tab_num].linkdata = data;
    },

    chooseIcon(i) {
      this.iconshow = true;
      this.tab_num = i;
    },
    changeIcon(data) {
      this.iconshow = false;
      this.data.tablist[this.tab_num].icon = data;
    },
    dellist(i) {
      this.data.tablist.splice(i, 1);
    },
    save() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if(this.list.length==0){
            this.$message.error('表单内容不能为空');
            return false
          }
          this.hideline = true;
          const _this = this;
          showLoading('生成预览图片');
          this.$nextTick(() => {
            html2canvas(_this.$refs.copyDom, {
              // backgroundColor: '#FFF',

              height: 828
            }).then(canvas => {
              // 转成图片，生成图片地址

              let small_img = canvas.toDataURL('image/jpg');
              let data = {
                images: small_img
              };
              this.hideline = false;
              hideLoading();
              pagebase64Up(data).then(res => {
                this.list.forEach(a => {
                  a.active = false;
                });
                let data = {
                  title: _this.obj.title,
                  image: res.msg,
                  config: JSON.stringify(this.list),
                  tries_limit: _this.obj.tries_limit,
                

                };
                if(this.id){
                  data.id=this.id
                  editform(data).then(res=>{
                    _this.$router.go(-1);
                  })
                }else{
                  formcreate(data).then(res => {
                    _this.$router.go(-1);
                  });
                }

              });
            });
          });
        }
      });
    }
  }
};
</script>
<style>
.input_content {
  margin-top: 10px;
  background: #f4f6f8;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 20px;
}

.input_content .el-color-picker__trigger {
  width: 70px;
}

.input_div {
  display: flex;
  margin-bottom: 10px;
}

.component-setter .el-card__body {
  height: calc(100vh - 125px);
  overflow-y: auto;
}

.selectlink .el-dialog__body {
  padding-bottom: 0;
}
</style>
<style scoped lang="scss">
.app {
  width: 640px;
  margin: 0 auto;
  height: 800px;
  overflow: scroll;
}

.dn-container {
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
}

.main_body {
  width: 100%;
  min-width: 1300px;
  box-sizing: border-box;
  padding-left: 340px;
  padding-right: 460px;
  display: flex;
  position: relative;
  background: #f4f6f8;
  justify-content: center;
  overflow: hidden;
  // height: 100%;
  height: calc(100vh - 70px);
  .main_left {
    position: absolute;
    width: 340px;
    // height: 100%;
    left: 0;
    top: 0;
    bottom: 22px;
    z-index: 0;
    background: #ffffff;
    padding: 20px;
    overflow-y: auto;

    .btn_group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .btn_item {
        position: relative;
        margin: 5px;
        width: 82px;
        height: 82px;
        box-sizing: border-box;
        padding: 0;
        background: #f4f6f8;
        border-radius: 2px;
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        i {
          color: #2d8cf0;
          font-size: 25px;
          margin-bottom: 6px;
        }
      }
    }
  }
  .phone-area {
    // height: 100%;
    // min-width: 496px;
    width: 434px;
    height: 828px;
    // flex: 1;

    box-sizing: border-box;
    margin-right: -10px;
    margin-left: -10px;
    background: url(../../../assets/images/ipbg.png) no-repeat;
    .scroll-body {
      overflow-y: auto;
      height: fit-content;
      width: 375px;
      height: 667px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      border-radius: 2px;
      box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
      margin: 69px auto 0 auto;
      // position: relative;
      // left: -1px;
      &::-webkit-scrollbar {
        display: none !important; /* Chrome Safari */
      }
      .page-content {
        min-height: 100%;
        width: 375px;

        .diy-phone {
          width: 375px;
          height: auto;
          min-height: 100%;
          background: #fff;

          .phone-body {
            background: #f3f3f3;
            .phone-main {
              min-height: 667px;
              box-sizing: border-box;
              border-top: 0;
              user-select: none;
              position: relative;
              display: flex;
              flex-direction: column;
            }
            .phone-title {
              height: 64px;
              background: #fff;
              background-size: 100% auto;
              text-align: center;
              cursor: pointer;
              display: block;
              white-space: nowrap;
              text-overflow: ellipsis;
              position: relative;
              &.pageInfo {
                box-shadow: 0 0 2px 0 #2d8cf0;
                z-index: 1000;
                position: relative;
              }
              .page-title {
                position: absolute;
                z-index: 100;
                font-family: PingFang SC;
                font-style: normal;
                font-weight: 600;
                font-size: 18px;
                line-height: 25px;
                display: flex;
                align-items: center;
                text-align: center;
                color: #212121;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: 10px;
                margin: 0;
              }

              .phone-top {
                display: flex;
                flex-direction: column;
                width: 375px;
                overflow: hidden;

                .custom-navbar img {
                  position: absolute;
                  right: 7px;
                  width: 87px;
                  height: 32px;
                  bottom: 6px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.phone-area::-webkit-scrollbar {
  display: none;
}

.component-setter {
  transform: translateX(0);
  position: absolute;
  width: 460px;
  height:calc(100vh - 130px);
  right: 0;
  top: 0;
  background: #ffffff;
  border: 1px solid #e9edef;
  box-sizing: border-box;
  border-radius: 2px;
  .setter-body {
    height: calc(100% - 80px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  .header {
    width: 460px;
    height: 60px;
    background: #f4f6f8;
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  .title {
    margin-left: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &::before {
      content: '';
      width: 4px;
      height: 18px;
      background: #4d6ef2;
      border-radius: 2px;
      margin-right: 8px;
    }
  }
}
.bottom-items {
  display: flex;
  position: absolute;
  bottom: 0;
  .btn_items {
    flex: 1;
    position: relative;
    .btn_text {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 6px 0 4px 0;
      .text {
        font-size: 12px;
      }
      .icon-box {
        height: 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 6px;
        position: relative;
        i {
          font-size: 26px;
          text-align: center;
          display: block;
        }
      }
    }
    .btn_icon {
      position: absolute;
      top: -2px;
      right: -9px;

      width: 18px;
      height: 18px;
      border-radius: 50%;
      text-align: center;
      font-size: 12px;
      line-height: 18px;
      color: #fff;
    }
    // display: flex;
  }
}
.container {
  display: flex;
  align-items: center;
  border: 1px solid #e9edef;
  background: #f4f6f8;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;

  > i {
    font-size: 24px;
  }

  &:hover {
    .cancal {
      display: block;
    }
  }

  .cancal {
    font-size: 20px;
    position: absolute;
    right: -10px;
    top: -10px;
    cursor: pointer;
    display: none;
  }

  .content {
    flex: 1;
  }
}
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}

.select_link {
  background: #fff;

  .select_btn {
    height: 36px;
    line-height: 28px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    color: #2d8cf0;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;

    &:hover {
      border-color: #2d8cf0;
    }
  }
}
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}

.drag-item {
  color: #000;
  // border: 1px solid red;
  width: 100%;
  // height: 300px;
  position: relative;
  cursor: pointer;
}

.drag-item::before,
.drag-item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  z-index: 100;
}

.drag-item::before {
  top: 0;
}

.drag-item::after {
  bottom: 0;
}

.drag-item .border {
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  z-index: 10;
}

.drag-item:hover {
  .border {
    border-left: 1px dashed #2d8cf0;
  }

  &::before {
    border-top: 1px dashed #2d8cf0;
  }

  &::after {
    border-top: 1px dashed #2d8cf0;
  }

  .del {
    display: block;
  }
}

.drag-item .left-border {
  left: 0;
}

.drag-item .right-border {
  right: 0;
}

.active-item .border {
  border-left: 1px solid #2d8cf0 !important;
}

.drag-item .del {
  position: absolute;
  width: 40px;
  height: 20px;
  right: 40px;
  top: 0;
  background: #ff1f2c;
  border-radius: 0px 0px 2px 2px;
  text-align: center;
  line-height: 18px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  z-index: 1000;
  display: none;
  transform: translate(100%, 0);
}

.active-item .del {
  display: block;
}

.active-item::before,
.active-item::after {
  border-top: 1px solid #2d8cf0 !important;
}
.foot_btns {
  width: 100%;
  position: absolute;
  bottom: 20px;
  border-top: 1px solid #c0c4cc;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  // padding-left: 40px;
}
</style>
